<template>
  <div class="questionTop">
    <div class="goods-info">
      <div class="goods-info-left">
        <img :src="itemInfo.img" alt="">
      </div>
      <div class="goods-info-right">
        <div class="tit">{{ itemInfo.title }}</div>
        <div class="txt">共{{ itemInfo.questionNum || 0 }}个问题</div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020-07-15 11:18:14
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020-07-15 11:18:14
   */
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    props: {
      itemInfo: {
        type: Object
      }
    }
  })
</script>

<style lang="scss">
  @import 'src/styles/mixin';
  .questionTop{
    padding: 20px 25px 26px;
    border-radius:0px 0px 20px 20px;
    background: #fff;
    .goods-info{
      font-size: 0;
      padding: 20px;
      background: #F7F7F7;
      border-radius: 20px;
      &-left{
        display: inline-block;
        width: 76px;
        height: 76px;
        margin-right: 15px;
        box-shadow: 0 0 8px #bbb;
        vertical-align: top;
        border-radius: 6px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      &-right{
        display: inline-block;
        width: calc(100% - 91px);
        .tit{
          width: 100%;
          font-size: 26px;
          color: #333;
          display: inline-block;
          margin-top: 6px;
          @include showEllipsis;
        }
        .txt{
          margin-top: 10px;
          font-size: 24px;
          color: #999999;
        }
      }
    }
  }
</style>
